<script setup>
  import { ref, onMounted, onUnmounted } from 'vue'
  const props = defineProps({
    seconds: {
      type: Number,
      default: 60,
    },
  })
  const emit = defineEmits(['timeup'])

  const remainingTime = ref(props.seconds)
  let timerId = null
  onMounted(() => {
    timerId = setInterval(() => {
      remainingTime.value--

      if (remainingTime.value < 10) {
        remainingTime.value = '0' + remainingTime.value
      }
      if (remainingTime.value === '00') {
        clearInterval(timerId)
        emit('timeup')
      }
    }, 1000)
  })
  onUnmounted(() => {
    clearInterval(timerId)
  })
</script>
<template>{{ remainingTime }}</template>

<style></style>
